<template>
  <div>
    <div class="left-search">
      <div class="search-title">测试数据</div>
      <el-radio-group v-model="searchForm.dataSource" class="search-form">
        <el-radio label="0" size="large">日</el-radio>
        <el-radio label="1" size="large">月</el-radio>
        <el-radio label="2" size="large">季</el-radio>
        <el-radio label="3" size="large">年</el-radio>
      </el-radio-group>
    </div>
    <div ref="echartsRef" class="earchs"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, onUnmounted, reactive, ref, markRaw } from 'vue';

const myEcharts = ref<any>();
const echartsRef = ref<any>();
const initEcharts = () => {
  myEcharts.value = markRaw(echarts.init(echartsRef.value));
  const options: any = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    grid: {
      left: '10px',
      right: '10px',
      bottom: '0px',
      top: '10px',
      containLabel: true,
    },
    series: [
      {
        barWidth: '40%',
        type: 'bar',
        data: [
          {
            value: 100,
            itemStyle: {
              color: 'orange',
            },
          },
          {
            value: 200,
            itemStyle: {
              color: 'blue',
            },
          },
          {
            value: 150,
            itemStyle: {
              color: 'orange',
            },
          },
          {
            value: 80,
            itemStyle: {
              color: 'orange',
            },
          },
          {
            value: 70,
            itemStyle: {
              color: 'orange',
            },
          },
          {
            value: 30,
            itemStyle: {
              color: 'orange',
            },
          },
          {
            value: 130,
            itemStyle: {
              color: 'orange',
            },
          },
        ],
      },
    ],
  };
  myEcharts.value.setOption(options);
};

const handleResize = () => {
  if (myEcharts.value) {
    myEcharts.value.resize();
  }
  console.log('first');
};

onMounted(() => {
  initEcharts();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

const searchForm = reactive({ dataSource: '' });
</script>

<style scoped lang="scss">
.left-search {
  height: 30px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .search-title {
    line-height: 40px;
  }
  .search-form {
    margin-left: 10px;
  }
  ::v-deep(.el-radio) {
    margin-right: 10px;
  }
}
.earchs {
  flex: 1;
  box-sizing: border-box;
}
</style>
